<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>更新参数</span>
          </div>
          <div class="save_button">
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack">返回</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="data" :inline="true" :rules="formRules">
            <el-input v-model="data.id" type="hidden" />
            <el-row :gutter="10">
              <el-col :xl="3" :lg="4" :md="6" :sm="8">
                <el-form-item prop="coding">
                  <div>编号</div>
                  <el-input v-model="data.coding" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="4" :md="6" :sm="8">
                <el-form-item prop="name">
                  <div>名称</div>
                  <el-input v-model="data.name" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="6" :sm="8">
                <el-form-item prop="cost_id">
                  <div>成本中心</div>
                  <v-select v-model="data.cost_id" action="costList" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="6" :sm="8">
                <el-form-item prop="category">
                  <div>类别</div>
                  <el-select v-model="data.category" size="mini">
                    <el-option v-for="(item, index) in theCategory" :key="index" :value="index" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="6" :sm="8">
                <el-form-item prop="status">
                  <div>状态</div>
                  <el-select v-model="data.status" size="mini">
                    <el-option v-for="(item, index) in commonStatus" :key="index" :value="index" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xl="5" :lg="4" :md="6" :sm="8" hidden>
                <el-form-item prop="equipment_id">
                  <div>设备</div>
                  <v-select v-model="data.equipment_id" action="eqList" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="6" :sm="8">
                <el-form-item prop="notice_low">
                  <div>预警偏低</div>
                  <el-input v-model="data.notice_low" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="6" :sm="8">
                <el-form-item prop="warning_low">
                  <div>预警过低</div>
                  <el-input v-model="data.warning_low" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="6" :sm="8">
                <el-form-item prop="notice_high">
                  <div>预警偏高</div>
                  <el-input v-model="data.notice_high" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="6" :sm="8">
                <el-form-item prop="warning_high">
                  <div>预警过高</div>
                  <el-input v-model="data.warning_high" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="4" :md="6" :sm="8" hidden>
                <el-form-item prop="plan_id">
                  <div>关联的维护计划</div>
                  <v-select v-model="data.plan_id" action="planList" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="6" :sm="8">
                <el-form-item prop="unit">
                  <div>单位</div>
                  <el-input v-model="data.unit" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="6" :sm="8">
                <el-form-item prop="standard">
                  <div>标准</div>
                  <el-input v-model="data.standard" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="2" :lg="4" :md="6" :sm="8">
                <el-form-item prop="sort">
                  <div>排序</div>
                  <el-input v-model="data.sort" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs>
            <el-tab-pane label="描述">
              <el-row :gutter="10">
                <el-col :xl="4" :lg="4" :md="5" :sm="5">
                  <div>
                    <span>创建时间日期</span>
                    <el-input v-model="data.create_time" placeholder="创建时间日期" class="mtb10" :disabled="true" />
                  </div>
                  <div>
                    <span>创建人</span>
                    <el-input v-model="data.cr_admin.name" placeholder="创建人" class="mtb10" :disabled="true" />
                  </div>
                  <div v-if="data.update_time">
                    <div>
                      <span>最近更新</span>
                      <el-input v-model="data.update_time" placeholder="最近更新" class="mtb10" :disabled="true" size="mini" />
                    </div>
                    <div>
                      <span>更新者</span>
                      <el-input v-model="data.up_admin.name" placeholder="更新者" class="mtb10" :disabled="true" size="mini" />
                    </div>
                  </div>
                </el-col>
                <el-col :xl="20" :lg="20" :md="19" :sm="19">
                  <Tinymce id="content" v-model="data.content" />
                </el-col>
              </el-row>
            </el-tab-pane>
            <!--
            <el-tab-pane label="读数">
              <el-row :gutter="10">
                <el-col :xl="18" :lg="18" :md="18" :sm="18">
                  <el-table :data="readingList">
                    <el-table-column prop="datetime" label="日期" min-width="32%" />
                    <el-table-column prop="value" label="值" min-width="17%" />
                    <el-table-column prop="total" label="累计" min-width="17%" />
                    <el-table-column prop="wordorder_id" label="工单" min-width="17%" />
                    <el-table-column label="" min-width="17%" />
                    <div slot="append" class="pt10">
                      <el-form :model="reading" inline>
                        <el-row :gutter="10">
                          <el-col :xl="6" :lg="6" :md="7" :sm="7">
                            <el-form-item>
                              <el-date-picker v-model="reading.datetime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini" placeholder="请选择时间" />
                            </el-form-item>
                          </el-col>
                          <el-col :xl="3" :lg="3" :md="4" :sm="4">
                            <el-form-item>
                              <el-input v-model="reading.value" size="mini" placeholder />
                            </el-form-item>
                          </el-col>
                          <el-col :xl="3" :lg="3" :md="4" :sm="4">
                            <el-form-item>
                              <el-input v-model="reading.total" size="mini" disabled placeholder />
                            </el-form-item>
                          </el-col>
                          <el-col :xl="3" :lg="3" :md="4" :sm="4">
                            <el-form-item>
                              <el-input v-model="reading.wordorder_id" size="mini" disabled placeholder />
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-form>
                    </div>
                  </el-table>
                </el-col>
              </el-row>
            </el-tab-pane>
            -->
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import API from '@/api/asset/param'
import { theCategory, commonStatus } from '@/utils/options'
import Tinymce from '@/components/Tinymce/index'
import VSelect from '@/components/select'
export default {
  inject: ['backUrl', 'delOne', 'update', 'goUrl'],
  components: {
    Tinymce,
    VSelect
  },
  data() {
    return {
      data: {
        'admin': {
          'phone': ''
        },
        'cr_admin': {
          'name': ''
        }
      },
      reading: {},
      theCategory,
      commonStatus,
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入参数名称',
            trigger: 'blur'
          }
        ],
        cost_id: [
          {
            required: true,
            message: '请选择成本中心',
            trigger: 'change'
          }
        ],
        category: [
          {
            required: true,
            message: '请选择类别',
            trigger: 'change'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        standard: [
          {
            required: true,
            message: '请填写标准',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    const id = this.$route.params.id
    API.param(id).then(response => {
      if (response.data.error_code === 23404) {
        this.$alert('您请求的参数不存在', '错误', {
          confirmButtonText: '确定',
          callback: () => {
            this.backUrl()
          }
        })
      }
      this.data = response.data
    })
  },
  methods: {
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    goBack() {
      this.goUrl('/asset/param')
    }
  }
}
</script>
